<template>
  <div class="w-full">
    <div class="relative w-full">
      <div
        :class="[
          'border rounded-lg shadow-sm overflow-hidden',
          invalid 
            ? 'border-red-400 ring-red-400 focus-within:ring-red-400 focus-within:ring-1 focus-within:border-red-400' 
            : 'border-gray-300 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500'
        ]">
        <label for="content" class="sr-only">Add your content</label>
        <textarea 
          rows="5" name="content" id="content" 
          class="block w-full py-3 border-0 resize-none focus:ring-0 sm:text-sm"
          placeholder="Add your content..."
          :value="content"
          @input="onTextArea"
        />

        <!-- Spacer element to match the height of the toolbar -->
        <div class="py-2" aria-hidden="true">
          <!-- Matches height of button in toolbar (1px border + 36px content height) -->
          <div class="py-px">
            <div class="h-9" />
          </div>
        </div>
      </div>

      <div class="absolute bottom-0 inset-x-0 pl-3 pr-2 py-2 flex justify-between">
        <div class="flex items-center space-x-5">
          <!-- 标题 -->
          <div class="inline-flex items-center">
            <label for="prompt" class="sr-only">Content prompt</label>
            <input 
              type="text" name="prompt" id="prompt" 
              class="block w-full border-0 border-b border-y-gray-300 border-transparent focus:border-indigo-600 focus:ring-0 sm:text-sm px-0" 
              placeholder="Content prompt" 
              :value="title"
              @input="onInput"
            />
          </div>
          <!-- 附件 -->
          <div class="flex items-center gap-5">
            <button 
              type="button"
              class="-m-2.5 w-10 h-10 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-500"
              @click="$emit('handleAttachmentUpload', index)"
            >
              <BaseIcon name="PhotoIcon" class="h-5 w-5" aria-hidden="true" />
              <span class="sr-only">Attach a file</span>
            </button>
            <div class="flex flex-row gap-2">
              <!-- 上传的图片列表 -->
              
              <div 
                v-for="(img, idx) in imgs"
                class="h-10 ring-1 ring-gray-300 rounded p-0.5 inline-block relative"
                @click="openModal(img)"
              >
                <img class="max-h-9" :src="img.url"/>
                <span class="absolute top-0 right-0 -mt-2 -mr-2 block h-4 w-4 rounded-full text-red-400 cursor-pointer">
                  <XCircleIcon class="h-4 w-4" @click.stop="removeImgs(idx)"/>
                </span>
              </div>
              
            </div>
          </div>
          
          
        </div>
        <div class="flex-shrink-0">
          <div class="flex items-center gap-2">
            <!-- 移除 -->
            <button 
              type="button"
              class="h-10 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-500"
              @click="$emit('delDetail', index)"
            >
              <BaseIcon name="MinusCircleIcon" class="h-5 w-5"></BaseIcon>
              <span class="sr-only">remove content</span>
            </button>
            
            <!-- 添加 -->
            <button 
              type="button"
              class="h-10 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-500"
              @click="$emit('addDetail')"
            >
              <BaseIcon name="PlusCircleIcon" class="h-5 w-5"></BaseIcon>
              <span class="sr-only">add content</span>
            </button>
          </div>

        </div>
      </div>
    </div>

    <span v-if="error" class="text-sm text-red-500 clear-both block">{{ error }}</span>
  </div>

  <!-- 弹窗 -->
  <TransitionRoot appear :show="isOpen" as="template">
    <Dialog as="div" @close="closeModal" class="relative z-10">
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="fixed inset-0 bg-black bg-opacity-25" />
      </TransitionChild>

      <div class="fixed inset-0 overflow-y-auto">
        <div
          class="flex min-h-full items-center justify-center p-4 text-center"
        >
          <TransitionChild
            as="template"
            enter="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel
              class="w-full overflow-hidden"
              @click="closeModal"
            >
              
              <img class="block mx-auto" :src="showImg"/>
              
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<script setup>
import { ref } from 'vue'
import { XCircleIcon } from '@heroicons/vue/24/solid'
import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogPanel,
} from '@headlessui/vue'

const props = defineProps({
  images: {
    type: Array,
    default: []
  },
  index: {
    type: Number,
    required: true
  },
  error: {
    type: [String, Boolean],
    default: null,
  },
  content: String,
  title: String,
  invalid: {
    type: [Boolean, Number]
  }
})

const emit = defineEmits(['inputDetail', 'addDetail', 'delDetail', 'handleAttachmentUpload', 'update:content', 'update:title', 'update:images'])

// ------------------------ 内容, 标题 -------------------------
function onTextArea(e) {
  emit('update:content', e.target.value)
  emit('inputDetail')
}

function onInput(e) {
  emit('update:title', e.target.value)
}

// ------------------------ 图片 ------------------------
const imgs = ref(props.images)

function removeImgs(idx) {
  imgs.value.splice(idx, 1)
  emit('update:images', imgs.value)
}

// ------------------------ 弹窗 -------------------------
const isOpen = ref(false)

const showImg = ref('')

function closeModal() {
  isOpen.value = false
}
function openModal(img) {
  showImg.value = img.url
  isOpen.value = true
}
</script>
